import React, { Fragment } from 'react'
import { StyleSheet, View, Animated, Text, ScrollView, TouchableOpacity } from 'react-native'
import BasePage from 'src/pageP/base/base-page/index'
import UserInfo from './components/UserInfo'
import PositionManage from './components/PositionManage'
import CompanyInfo from './components/CompanyInfo'
import CompanyOtherList from './components/CompanyOtherList'
import CompanyApplyNotComplete from './components/CompanyApplyNotComplete'
import { isEmptyObjectFn } from 'src/utils/JSTypeUtil'
import { CommonToast } from 'src/utils/ToastUtil'
/* redux */
import { connect } from 'react-redux'
import {
  INIT_MAIN_PAGE_B_ACTION,
  UPDATE_MAIN_PAGE_B_ACTION,
  DO_REQUEST_MAIN_PAGE_B_ACTION,
  GET_COMPOANY_INFO
} from './store/action'
import {
  UPDATE_USERINFO_ACTION,
  DO_REQUEST_USERINFO_B_ACTION
} from 'src/store/actions/userinfo'
import { CustomCallPhone } from 'src/utils/PermissionsUtil'
import { ServiceTelephone } from 'src/config/index'
import { IS_IOS, IS_IPHONEX, ScaleS, ScaleT, WIDTH, HEIGHT } from 'src/utils/ScreenUtil'
import AnimatedNaviBar, { MARGINTOP } from './components/AnimatedNaviBar'
import { shareToWXMiniProgram } from 'src/utils/PayUtil'
import { TabBar, TabView } from 'react-native-tab-view'
import CustomButton from 'src/components/button/CustomButton'
import { ONE_PIXEL } from '@/utils/ScreenUtil'
import CustomImage from 'src/components/image/CustomImage'
import SchoolRecruit from './components/SchoolRecruit'
import CompanyBody from './components/companyBody'
import {
  updateCompanyInfo,
  myCompanyBaseInfo,
  companyLiveList
} from 'src/utils/RequestAPI'
import NavigationUtil from 'src/utils/NavigationUtil'
import { companyBgColoList, companyLogo } from 'src/utils/ConfigUtil'
import BlurImg from 'src/components/blur-img'
import LinearGradient from 'react-native-linear-gradient'
import { showTipModal } from 'src/utils/ModalUtil'
import { DO_REQUEST_CHANGE_COMPANY_INFO_ACTION } from 'src/pageB/main/main-page/store/action'
const triangleArrowRight = require('src/imgC/userinfo/vip_arrow.png')

const mapActiontoProps = dispatch => ({
  doRequestUpdateCompanyInfo(...payload) {
    const promise = DO_REQUEST_CHANGE_COMPANY_INFO_ACTION(...payload)
    dispatch(promise)
    return promise.payload
  },
  initState() {
    dispatch(INIT_MAIN_PAGE_B_ACTION())
  },
  updateState(payload) {
    dispatch(UPDATE_MAIN_PAGE_B_ACTION(payload))
  },
  updateUserInfo(payload) {
    dispatch(UPDATE_USERINFO_ACTION(payload))
  },
  doRequestUserInfoB(...payload) {
    const promise = DO_REQUEST_USERINFO_B_ACTION(...payload)
    dispatch(promise)
    return promise.payload
  },
  doRequestMainPage(payload) {
    const promise = DO_REQUEST_MAIN_PAGE_B_ACTION(payload)
    dispatch(promise)
    return promise.payload
  },
  getCompanyInfo(data) {
    dispatch(GET_COMPOANY_INFO(data))
  }
})

@connect(
  ({ userinfo, BMineCenterStore }) => {
    return {
      haveCompanyApply: BMineCenterStore.haveCompanyApply,
      userinfo,
      userinfoB: userinfo.B,
      ...BMineCenterStore
    }
  },
  mapActiontoProps
)
class BMinePage extends BasePage {
  constructor(props) {
    super(props)
    this.state = {
      header: null,
      scrollY: new Animated.Value(0),
      index: 0,
      routes: [
        { key: 'position', title: '职位' },
        { key: 'schoolEnrollment', title: '校招' },
        { key: 'company', title: '企业' }
      ],
      data: {}
    }
  }

  childRender() {
    const {
      userinfo,
      userinfoB: { userName },
      top,
      navigation
    } = this.props
    const { role } = userinfo
    return (
      <View style={styles.containerF}>
        <ScrollView style={styles.container}
          ref={this._scrollViewRef}
          contentContainerStyle={styles.contentContainer}
          stickyHeaderIndices={[1]}>
          <UserInfo
            style={styles.userInfo}
            userinfo={userinfo}
            userNumberData={top}
            avatorClick={this.avatorClick}
            userNameClick={this.userNameClick}
            setBtnClick={this.setBtnClick}
            goPersonCollection={this.goPersonCollection}
            goCommunicationHistory={this.goCommunicationHistory}
            onShared={this._onShared}
            {...this.props}
          />
          {this._renderTabBar()}
          <TabView
            style={styles.tabView}
            navigationState={this.state}
            renderScene={this._renderScene}
            onIndexChange={this._onIndexChange}
            renderTabBar={() => null}
            initialLayout={{
              height: 0,
              width: WIDTH
            }}
          />
        </ScrollView>
        <AnimatedNaviBar role={role} userName={userName || '您的姓名'} scrollY={this.state.scrollY}
          userNameClick={this.userNameClick} shareBtnClick={this._onShared} setBtnClick={this.setBtnClick} />
        <CompanyApplyNotComplete
          navigation={navigation}
        />
      </View>
    )
  }

  getMyCompanyBaseInfo = () => {
    const { haveCompanyApply: { companyId } } = this.props
    if (companyId) {
      return myCompanyBaseInfo({ headers: { companyId } }).then((res) => {
        // 判断基本信息填写几项
        const data = res.data
        if (data) {
          data.BaseInfoSize = this.prewBaseInfoSize(data)
          data.companyAddress = data.areaProvince == data.areaCity ? data.areaCity + data.addressArea + data.addressDetail : data.areaProvince + data.areaCity + data.addressArea
          // 福利字段进行处理
          let benefitsSize
          try {
            const benefits = (JSON.parse(data.benefits) || []).length
            benefitsSize = `已选${benefits}项`
          } catch (error) {
            benefitsSize = null
          }
          data.benefitsSize = benefitsSize
          data.companyPicUrl = (data.companyPicUrl.split(',') || []).filter(e => e)
          data.companyInfoLength = (data.companyInfo || '').length + '字'
          data.famousStatus = data.famousId ? '去查看' : '去申请'
          data.canNotEdit = !!(data.famousId && !data.isMaster)
          this.props.getCompanyInfo(data)
          this.setState({
            data: data
          })
        }
      })
    }
  }

  // 预览完善度
  prewBaseInfoSize = ({ addressDetail, companyInfo, companyAbout, companyFinance, companyPerson }, tip = false) => {
    let BaseInfoSize = 0
    const checks = [
      {
        key: addressDetail,
        value: '企业地址'
      },
      {
        key: companyInfo,
        value: '企业简介'
      },
      {
        key: companyAbout,
        value: '行业'
      },
      {
        key: companyFinance,
        value: '融资阶段'
      },
      {
        key: companyPerson,
        value: '人员规模'
      }
    ].every(e => {
      if (e.key) {
        ++BaseInfoSize
      } else {
        tip && CommonToast(`请完善${e.value}信息`)
      }
      return e.key
    })
    return BaseInfoSize
  }

  componentWillFocus() {
    this.getMyCompanyBaseInfo()
    const {
      userinfo: { userId }, doRequestUserInfoB, doRequestMainPage
    } = this.props
    if (userId) {
      doRequestUserInfoB({ params: { userId } }).finally(() => {
        const {
          userinfo: { B: { userId: userIdB } }
        } = this.props
        if (userIdB) {
          doRequestMainPage({ userId })
        }
      })
    }
  }

  /**
   * 渲染每一个屏
   * @param route
   * @param jumpTo
   * @returns {*}
   * @private
   */
  _renderScene = ({ route, jumpTo }) => {
    const { index, routes } = this.state
    switch (route.key) {
      case 'position':
        return routes[index].key === 'position' ? this._renderPositionComponent() : null
      case 'schoolEnrollment':
        return routes[index].key === 'schoolEnrollment' ? this._renderSchoolEnrollmentComponent() : null
      case 'company':
        return routes[index].key === 'company' ? this._renderCompanyComponent() : null
    }
  }

  /**
   * 切换标签
   * @param index
   * @private
   */
  _onIndexChange = (index) => {
    this.setState({ index })
    this._jumpToTop(index)
  }

  /**
   * 渲染tabBar
   * @param props
   * @returns {*}
   * @private
   */
  _renderTabBar = () => {
    const { member } = this.props
    const { index, routes } = this.state
    const isMember = !isEmptyObjectFn(member)
    return (
      <View style={styles.tabContainer}>
        <View style={styles.tabContainerLeft}>
          <CustomButton style={styles.tabItem} onPress={this._tabBarClick} params={{ index: 0 }}>
            <Text style={[styles.tabItemText, index === 0 && styles.tabItemActive]}>{routes[0].title}</Text>
          </CustomButton>
          <View style={styles.tabLine}></View>
          <CustomButton style={styles.tabItem} onPress={this._tabBarClick} params={{ index: 1 }}>
            <Text style={[styles.tabItemText, index === 1 && styles.tabItemActive]}>{routes[1].title}</Text>
          </CustomButton>
          <View style={styles.tabLine}></View>
          <CustomButton style={styles.tabItem} onPress={this._tabBarClick} params={{ index: 2 }}>
            <Text style={[styles.tabItemText, index === 2 && styles.tabItemActive]}>{routes[2].title}</Text>
          </CustomButton>
        </View>
        <CustomButton style={styles.vipItem} onPress={this.memberCardClick}>
          <View style={styles.vipView}>
            <CustomImage
              style={styles.vipIcon}
              source={require('@/imgC/userinfo/vip-icon.png')}
            />
            <Text style={styles.vipItemText}>{isMember ? '超级会员' : '升级会员'}</Text>
            <CustomImage
              style={styles.triangleArrowRight}
              source={triangleArrowRight}
            />
          </View>
        </CustomButton>
      </View>
    )
  }

  _tabBarClick = ({ index }) => {
    this.setState({
      index
    })
    this._jumpToTop(index)
  }

  _scrollViewRef = (ref) => {
    this.scrollView = ref
  }

  _jumpToTop = (index) => {
    setTimeout(() => {
      if (index === 2) {
        this.scrollView.scrollTo({ y: ScaleS(245), animated: true })
      }
    }, 10)
  }

  /**
   * 渲染职位
   * @returns {*}
   * @private
   */
  _renderPositionComponent = () => {
    const {
      post,
      company,
      member
    } = this.props
    return (
      <Fragment>
        <PositionManage jobData={post} jobClick={this.jobCellClick} />
        {/* <CompanyOtherList onClick={this.companyOtherClick}/> */}
      </Fragment>
    )
  }

  /**
   * 渲染校招
   * @returns {*}
   * @private
   */
  _renderSchoolEnrollmentComponent = () => {
    const { companyLiveList: { data = [] }, haveCompanyApply: { companyId } } = this.props
    return (
      <SchoolRecruit data={data} companyId={companyId} />
    )
  }

  /* 公司简称 */
  jumpBCompanyNameSample = ({ data }) => {
    if (this.slaveCompanyCheck()) {
      return
    }
    const { doRequestUpdateCompanyInfo, haveCompanyApply: { companyId } } = this.props
    const saveCallback = simpleName => {
      if (simpleName) {
        doRequestUpdateCompanyInfo({ params: { simpleName, companyId } }).then(() => {
          CommonToast('保存成功')
          this.getMyCompanyBaseInfo()
        })
      }
    }
    this.props.navigation.navigate('CommonInputPage', {
      title: '企业简称',
      desc: '*请填写企业简称',
      placeholder: '请输入',
      maxLength: 10,
      value: data.simpleName || '',
      saveCallback
    })
  }

  jumpCompanyAvator = ({ name, uri }) => {
    if (this.slaveCompanyCheck()) {
      return
    }
    this.props.navigation.navigate('CompanyAvator', {
      userName: name, userAvator: uri, getData: this.getData
    })
  }

  /* 主管企业提示 */
  masterCompanyPress = () => {
    const tipTxt = {
      color: '#444444',
      fontSize: ScaleT(16),
      lineHeight: ScaleS(26)
    }
    this.tipPrompModal = showTipModal({
      contentText: '您是当前名企的主管企业，拥有管理该名企的权益，权益包含：',
      confirmText: '知道了',
      cancelText: null,
      onConfirm: () => {
        this.tipPrompModal.close()
        this.tipPrompModal = null
      },
      children: <View style={{
        marginTop: ScaleS(-30),
        padding: ScaleS(20)
      }}>
        <Text style={tipTxt}>1. 可以修改包括基本信息、公司福利、公司相册、以及slogan；</Text>
        <Text style={tipTxt}>2. 查看名企关联企业；</Text>
        <Text style={tipTxt}>3. 有权删除关联企业； </Text>
        <Text style={tipTxt}>4. 通过客服添加关联企业</Text>
      </View>
    })
  }

  /**
   * 渲染公司
   * @returns {*}
   * @private
   */
  _renderCompanyComponent = () => {
    const {
      data,
      company,
      member,
      haveCompanyApply
    } = this.props
    return (
      <View style={{ minHeight: HEIGHT - ScaleS(170) }}>
        <View style={styles.containerS} >
          <View style={styles.contentWrap}>
            <View style={styles.titleWrap}>
              <View style={styles.firstWrap}>
                <CustomButton onPress={this.jumpBCompanyNameSample} params={{ data }} style={styles.simpleNameBtn}>
                  <Text numberOfLines={1} style={styles.simpleName}>{data.simpleName || '请填写简称'}</Text>
                </CustomButton>
                {!!data.famousId && <Fragment>
                  <LinearGradient
                    colors={['#FF9310', '#FFDC25']}
                    style={styles.famousWrap}>
                    <Text style={styles.famousText}>名企</Text>
                  </LinearGradient>
                  {data.isMaster && <CustomButton style={[styles.famousType]} onPress={this.masterCompanyPress}>
                    <Text style={[styles.famousTypeText]}>主管企业</Text>
                    <CustomButton style={styles.famousQuestionWrap} onPress={this.masterCompanyPress}>
                      <Text style={styles.famousQuestion}>?</Text>
                    </CustomButton>
                  </CustomButton>}
                  {!data.isMaster && <CustomButton style={[styles.famousType, { backgroundColor: '#F0F0F0' }]} onPress={this.slaveCompanyPress}>
                    <Text style={[styles.famousTypeText, { color: '#999999' }]}>关联企业</Text>
                    <CustomButton style={styles.famousQuestionWrap} onPress={this.slaveCompanyPress}>
                      <Text style={styles.famousQuestion}>?</Text>
                    </CustomButton>
                  </CustomButton>}
                </Fragment>}
              </View>
              <Text style={styles.companyName}>{data.companyName || ''}</Text>
            </View>
            <CustomButton onPress={this.jumpCompanyAvator} params={{ name: data.simpleName || data.companyName || '', uri: data.companyLogo }} style={styles.imgShadow}>
              <CustomImage style={styles.logo} source={data.companyLogo ? { uri: data.companyLogo } : companyLogo} />
            </CustomButton>
          </View>
        </View >
        <CompanyBody
          companyId={haveCompanyApply.companyId}
          data={data}
          jumpFn={this.jumpFn}
          getData={this.getData}
          jumpCompanyWelfare={this.jumpCompanyWelfare}
          CommonInputPage={this.CommonInputPage}
          slaveCompanyCheck={this.slaveCompanyCheck} />
      </View>
    )
  }

  jumpFnCheckRouters = ['BusinessAddress', 'BusinessIndustry']

  jumpFn = (jump, data = {}) => {
    if (this.jumpFnCheckRouters.includes(jump) && this.slaveCompanyCheck()) {
      return
    }
    const getData = this.getData
    const { haveCompanyApply } = this.props
    this.props.navigation.navigate(jump, { ...data, getData, companyId: haveCompanyApply.companyId, getMyCompanyBaseInfo: this.getMyCompanyBaseInfo })
  }

  getData = (items, query, Fn, companyId, noToast) => {
    const { haveCompanyApply } = this.props
    updateCompanyInfo({ params: { ...query, companyId: haveCompanyApply.companyId } }).then((e) => {
      if (e.data === true) {
        this.getMyCompanyBaseInfo()
        if (!noToast) {
          NavigationUtil.goBack()
        }
        Fn(false)
        if (!noToast) {
          CommonToast('保存成功')
        }
        return e
      }
    })
  }

  /* 公司福利 */
  jumpCompanyWelfare = (jump) => {
    if (this.slaveCompanyCheck()) {
      return
    }
    const { data = {} } = this.state
    const { haveCompanyApply } = this.props
    this.props.navigation.navigate(jump, { welfareItemList: data.benefits, companyId: haveCompanyApply.companyId, getMyCompanyBaseInfo: this.getMyCompanyBaseInfo })
  }

  CommonInputPage = (jump, item, name, companyId) => {
    if (this.slaveCompanyCheck()) {
      return
    }
    const saveCallback = value => {
      if (typeof name === 'string') {
        const params = {
          [name]: value,
          companyId
        }
        updateCompanyInfo({ params }).then((e) => {
          if (e.data === true) {
            CommonToast('保存成功')
            this.getMyCompanyBaseInfo()
          }
        })
      }
    }
    this.props.navigation.navigate(jump, {
      ...item,
      saveCallback
    })
  }

  slaveCompanyCheck = () => {
    // 关联企业不可以修改
    const { data: { canNotEdit } } = this.state
    if (canNotEdit) {
      this.slaveCompanyPress()
      return true
    }
  }

  slaveCompanyPress = () => {
    this.tipPrompModal = showTipModal({
      contentText: '您是当前名企的关联企业，关联企业不可对名企相关信息进行修改',
      confirmText: '知道了',
      cancelText: null,
      onConfirm: () => {
        this.tipPrompModal.close()
        this.tipPrompModal = null
      }
    })
  }

  _loginJump = () => {
    const {
      userinfo: {
        userId,
        B: { userId: userIdB } = {}
      }
    } = this.props
    if (!userId) {
      this.props.navigation.navigate('OneLogin')
      return true
    }
    if (!userIdB) {
      this.props.navigation.navigate('BFirstUserInfo')
      return true
    }
  }

  _companyJump = () => {
    const {
      haveCompanyApply: { companyDone } = {},
      company: { isBlack }
    } = this.props
    if (!companyDone) {
      CommonToast('请稍后')
      return true
    }
    if (isBlack) {
      CommonToast('您的企业已被拉黑')
      return true
    }
  }

  avatorClick = () => {
    console.log('avatorClick')
    !this._loginJump() && this.props.navigation.navigate('BUserAvator')
  }

  userNameClick = () => {
    console.log('userNameClick')
    !this._loginJump() && this.props.navigation.navigate('BUserInfoBasic')
  }

  setBtnClick = () => {
    console.log('setBtnClick')
    this.props.navigation.navigate('BSetPage')
  }

  goPersonCollection = () => {
    !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BPersonCollection')
  }

  goCommunicationHistory = () => {
    !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BCommunicationHistory')
  }

  jobCellClick = index => {
    console.log('jobCellClick', index)
    !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('JobPartTime', {
      type: index
    })
  }

  memberCardClick = () => {
    if (this._loginJump() || this._companyJump()) {
      return
    }
    const { member } = this.props
    if (member.remainingDay > 0) {
      this.props.navigation.navigate('BMemberDetail')
    } else {
      this.props.navigation.navigate('BMemberOpen')
    }
  }

  companyCardClick = () => {
    !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BMineCompany')
  }

  companyOtherClick = index => {
    console.log('companyOtherClick', index)
    if (index === 0) {
      CustomCallPhone(ServiceTelephone)
    } else if (index === 1) {
      !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BMemberOrder')
    }
  }

  _onShared = () => {
    const { company: { companyId, companyName, simpleName } } = this.props
    const title = simpleName || companyName
    if (companyId && title) {
      shareToWXMiniProgram({ title, shareUrl: `pages/company-homepage/index?id=${companyId}&share=app` })
    }
  }
}

export default BMinePage

const styles = StyleSheet.create({
  containerF: {
    flex: 1,
    paddingTop: IS_IPHONEX ? ScaleS(52) : ScaleS(32)
  },
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
  },
  userInfo: {
  },
  tabContainer: {
    flexDirection: 'row',
    paddingHorizontal: ScaleS(20),
    paddingTop: ScaleS(22),
    paddingBottom: ScaleS(10),
    // marginBottom: ScaleS(20),
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  tabContainerLeft: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  tabItem: {
    // marginRight: ScaleS(29)
  },
  tabLine: {
    width: ONE_PIXEL,
    height: ScaleS(10),
    backgroundColor: '#d5d5d5',
    marginHorizontal: ScaleS(20)
  },
  tabItemText: {
    fontSize: ScaleT(13),
    fontWeight: '500',
    color: '#999999'
  },
  tabItemActive: {
    color: '#3C3C3C',
    fontWeight: '900'
  },
  vipView: {
    flexDirection: 'row',
    alignItems: 'center',
    width: ScaleS(85),
    height: ScaleS(21),
    justifyContent: 'center'
  },
  vipItem: {
    position: 'absolute',
    right: ScaleS(0),
    width: ScaleS(85),
    height: ScaleS(21),
    backgroundColor: '#F9F9F9',
    borderRadius: ScaleS(11)
  },
  vipIcon: {
    width: ScaleS(21),
    height: ScaleS(13),
    marginRight: ScaleS(3)
  },
  vipItemText: {
    fontSize: ScaleT(10),
    color: '#3C3C3C',
    fontWeight: '500'
  },
  triangleArrowRight: {
    width: ScaleS(4),
    height: ScaleS(8),
    marginLeft: ScaleS(3)
  },
  containerS: {
    width: ScaleS(335),
    height: ScaleS(88),
    flexDirection: 'row',
    borderRadius: ScaleS(10),
    marginHorizontal: ScaleS(20),
    marginTop: ScaleS(35),
    marginBottom: ScaleS(20),
    backgroundColor: 'rgba(247, 247, 247, 1)',
    overflow: 'hidden'
  },
  contentWrap: {
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: ScaleS(20),
    borderRadius: ScaleS(10)
  },
  titleWrap: {
  },
  firstWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  companyName: {
    color: 'rgba(102, 102, 102, 1)',
    width: ScaleS(210),
    fontSize: ScaleT(12),
    marginTop: ScaleS(14)
  },
  simpleNameBtn: {
  },
  simpleName: {
    color: 'rgba(60, 60, 60, 1)',
    fontWeight: '600',
    fontSize: ScaleT(16)
  },
  famousWrap: {
    width: ScaleS(42),
    height: ScaleS(18),
    marginLeft: ScaleS(8),
    borderRadius: ScaleS(8),
    borderBottomLeftRadius: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  famousText: {
    color: '#FFFFFF',
    fontWeight: '500',
    fontSize: ScaleT(11)
  },
  famousType: {
    position: 'relative',
    width: ScaleS(51),
    height: ScaleS(18),
    marginLeft: ScaleS(8),
    backgroundColor: '#FFF4E8',
    borderRadius: ScaleS(3),
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: ScaleS(8)
  },
  famousTypeText: {
    color: '#FF9310',
    fontWeight: '500',
    fontSize: ScaleT(10)
  },
  famousQuestionWrap: {
    position: 'absolute',
    top: ScaleS(-5),
    right: ScaleS(-5),
    width: ScaleS(10),
    height: ScaleS(10),
    borderRadius: ScaleS(5),
    backgroundColor: '#FF4F4E',
    justifyContent: 'center',
    alignItems: 'center'
  },
  famousQuestion: {
    textAlign: 'center',
    color: '#FFFFFF',
    fontSize: ScaleT(8),
    lineHeight: ScaleS(10)
  },
  imgShadow: {
    width: ScaleS(48),
    height: ScaleS(48),
    borderRadius: ScaleS(10)
  },
  logo: {
    width: ScaleS(48),
    height: ScaleS(48),
    borderRadius: ScaleS(10),
    resizeMode: 'cover'
  }
})
